<template>
    <div class="ZYF-Abnormal">
        <h3 class="h3">监测站点异常数据</h3>
        <div class="deviceinfo-from">
            <a-form-model layout="inline" :model="page" :colon="false">
                <a-form-model-item label="排口名称" :label-col="{span: 6}" :wrapper-col="{span: 16}">
                    <a-tree-select :treeDefaultExpandAll="true" v-model="page.monitorId" :filterTreeNode="filterTreeNode" :tree-data="TreeData" treeNodeFilterProp="title" show-search :dropdownStyle="{maxHeight:'500px',overflow: 'auto'}" :replaceFields="{title:'name',key:'id',value:'id',children:'equipmentInfos'}" allowClear placeholder="请选择排口" />
                </a-form-model-item>
                <a-form-model-item label="监测因子" :label-col="{span: 6}" :wrapper-col="{span: 16}">
                    <a-input v-model="page.monitorFactorsName" placeholder="请输入要查找的监测因子" allow-clear />
                </a-form-model-item>
                <a-form-model-item>
                    <a-button type="primary" @click="onSubmit">查询</a-button>
                </a-form-model-item>
            </a-form-model>
        </div>
        <div class="tableclass">
            <my-table style="height:98%" :columns="columns" :rowKey="record=> record.id" :data-source="TableData" :pagination="false">
                <template slot="operate" slot-scope="text,record,index">
                    <div class="handle">
                        <span @click="isEchartsFn(record,index)">查看图表</span>
                    </div>
                </template>
            </my-table>
            <div class="content-bottom clearfix">
                <div class="page-box">
                    <a-pagination :show-total="total => `共 ${total} 条记录`" v-model="page.current" :total="total" :defaultPageSize="page.size" :item-render="itemRender" @change="pagechangeFn" hideOnSinglePage />
                </div>
            </div>
        </div>
        <chart-pop ref="ChartPop" :chartData="chartData"></chart-pop>
        <!-- 图表弹框 -->
        <echartesPop ref="echartsRef" :monitorData="monitorData"></echartesPop>
    </div>
</template>

<script>
import moment from "moment";
import echartesPop from "@/views/air/components/echartesPop";
import ChartPop from "@/views/air/components/chartPop"
export default {
    components: {
        echartesPop,
        ChartPop,
    },
    data() {
        return {
            TreeData: [],
            equipmentTypeId: "1",
            // 设备表格字段
            columns: [
                {
                    title: "序号",
                    // dataIndex: "i",
                    align: "center",
                    width: "80px",
                    customRender: (text, record, index) =>
                        `${
                            (this.page.current - 1) * this.page.size + index + 1
                        }`,
                },
                {
                    title: "区域名称",
                    dataIndex: "areaName",
                    align: "center",
                    ellipsis: true,
                },
                {
                    title: "企业名称",
                    dataIndex: "companyName",
                    align: "center",
                    ellipsis: true,
                },
                {
                    title: "站点名称",
                    dataIndex: "monitorName",
                    align: "center",
                    ellipsis: true,
                },
                {
                    title: "报警名称",
                    dataIndex: "lastMonitorWarningName",
                    align: "center",
                    ellipsis: true,
                },
                {
                    title: "报警值",
                    dataIndex: "lastValue",
                    align: "center",
                    ellipsis: true,
                },
                {
                    title: "监测因子名称",
                    dataIndex: "monitorFactorsName",
                    align: "center",
                    ellipsis: true,
                },
                {
                    title: "最新报警时间",
                    dataIndex: "modifyTime",
                    align: "center",
                    ellipsis: true,
                    width: "200px",
                },
                // {
                //     title: "处理状态",
                //     dataIndex: "status",
                //     align: "center",
                //     ellipsis: true,
                // },
                {
                    title: "报警次数",
                    dataIndex: "hits",
                    align: "center",
                    ellipsis: true,
                },
                // {
                //     title: "其他信息",
                //     scopedSlots: {
                //         customRender: "operate",
                //     },
                //     align: "center",
                //     width: "140px",
                // },
            ],
            TableData: [], // 分页表格数据
            // 设备信息分页查询
            page: {
                current: 1,
                size: 10,
              monitorType: "",
              monitorId: undefined,
              monitorFactorsName: "",
            },
            total: 0, // 设备总条数
            chartData:{},
            monitorData: [], // 图表弹窗警告类型数组
        };
    },
    methods: {
      filterTreeNode(inputValue,treeNode){
        return treeNode.data.props.filterName.indexOf(inputValue) === -1?false:true;
      },
        // 添加设备弹窗
        addEquipmentFn() {
            this.$refs.addPop.form.equipmentTypeId = this.equipmentTypeId;
            this.$refs.addPop.formDrawer = true;
        },
        // 图表弹框
        isEchartsFn(record) {
            console.log(record);
            this.$refs.ChartPop.isEcharts = true;
            this.chartData = record;
            this.$nextTick(() => {
                this.$refs.ChartPop.getEchartsData();
            });
        },
        // 搜索查询
        onSubmit() {
            this.page.current = 1;
            this.getdata();
        },

        // 分页方法
        itemRender(current, type, originalElement) {
            if (type === "prev") {
                return <a> 上一页 </a>;
            } else if (type === "next") {
                return <a> 下一页 </a>;
            }
            return originalElement;
        },
        pagechangeFn(page) {
            this.page.current = page;
            this.getdata();
        },
        // 获取数据
        // getdata() {
        //     this.$api.findWaringData(this.page).then((res) => {
        //         if (res.data.code == 0) {
        //             this.TableData = res.data.data;
        //             this.TableData.forEach((v) => {
        //                 switch (v.cn) {
        //                     case "2011":
        //                         v.cnName = "实时数据报警类型";
        //                         break;
        //                     case "2051":
        //                         v.cnName = "分钟数据报警类型";
        //                         break;
        //                     case "2061":
        //                         v.cnName = "小时数据报警类型";
        //                         break;
        //                     case "2031":
        //                         v.cnName = "天数据报警类型";
        //                         break;
        //                     default:
        //                         v.name = "";
        //                         break;
        //                 }
        //                 v.createTime = moment(parseInt(v.createTime)).format(
        //                     "YYYY/MM/DD HH:mm:ss"
        //                 );
        //             });
        //             this.total = res.data.total;
        //         } else {
        //             this.$message.warning(res.data.errorMessage);
        //         }
        //     });
        // },
        getdata() {

            this.$api.MonitorStationAbnormalData(this.page).then((res) => {
                if (res.data.code == 0) {
                    this.TableData = res.data.data;
                    this.TableData.forEach((v) => {
                        v.createTime = moment(parseInt(v.createTime)).format(
                            "YYYY/MM/DD HH:mm:ss"
                        );
                        v.modifyTime = moment(parseInt(v.modifyTime)).format(
                            "YYYY/MM/DD HH:mm:ss"
                        );
                    });
                    this.total = res.data.total;
                    console.log(this.TableData);
                } else {
                    this.$message.warning(res.data.errorMessage);
                }
            });
        },
      filData(data){
        if(data instanceof Array){
          data.forEach(v=>{
            v.filterName = v.name;
            if(v.equipmentInfos){
              this.filData(v)
            }
          })
          return data
        }else {
          data.equipmentInfos.forEach(v=>{
            v.filterName = data.name + "("+ v.name +")";
          })
          return data
        }

      }
    },
    created() {
        // 获取设备下拉数据
        console.log(this.$user)
        this.$api.getFindMonitorInfoByUserId().then((res) => {
            if (res.data.code == 0) {
              res.data.data.forEach(v=>{
                v.selectable = false
              })
                this.TreeData = this.filData(res.data.data);
                this.dataLoading3 = true;
            } else {
                this.$message.info(res.data.errorMessage);
            }
        });
    },
    mounted() {
        this.getdata();
    },
};
</script>

<style lang="scss" scoped>
.ZYF-Abnormal {
    width: 100%;
    height: 100%;
    padding: 1%;
    box-sizing: border-box;
    .deviceinfo-from {
        padding: 10px 0;
        display: flex;
        justify-content: space-between;
    }

    .tableclass {
        width: 100%;
        height: 86%;
    }

    .content-bottom {
        // margin-top: 12px;
        width: 100%;
    }

    .page-box {
        float: right;
    }
}

.Yellclass {
    color: springgreen;
}
.sousuobtn {
    background-color: #189580;
    border-color: #189580;
    padding: 0 10px;
}

/* 表单样式 */
::v-deep.ZYF-Abnormal .ant-form-item {
    margin-bottom: 0;
}
::v-deep.ZYF-Abnormal .deviceinfo-from .ant-form-item {
    width: 300px;
}
::v-deep.ZYF-Abnormal .deviceinfo-from .ant-form {
    width: 80%;
    display: flex;
}
/* 表格样式 */
.handle {
    width: 100%;
    //color: #207064;
}

.handle > span:hover {
    cursor: pointer;
    color: aquamarine;
}

//::v-deep.ZYF-Abnormal .ant-table-thead > tr > th {
//    background-color: #207064;
//    color: #9fb043;
//    border-bottom: 0;
//    border-radius: 0;
//}

/* 图表 */
.line-echarts {
    width: 100%;
    height: 300px;
}
.echarts-title {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding: 10px 0;
    box-sizing: border-box;
}
</style>
